<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>品牌列表</title>
    <link rel="stylesheet" th:href="@{/static/css/index.css}">
    <script th:src="@{/static/js/vue.js}"></script>
    <script th:src="@{/static/js/axios.min.js}"></script>
    <script th:src="@{/static/js/index.js}"></script>
</head>
<body>
<div id="app">
    <el-button type="success" @click="formVisible=true,pojo={parentId:parentId}">添加</el-button>
    <el-button type="primary" size="mini"
               v-if="parentIds.length>0"
               @click="getUpMenu">返回上级</el-button>
    <template>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="分类ID"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="分类名称"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="goodsNum"
                    label="商品数量"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="parentId"
                    label="级别"
                    width="100">
                <template slot-scope="scope">
                    {{parentIds.length+1}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="isShow"
                    label="是否显示"
                    width="130">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.isShow"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-value="1"
                            inactive-value="0">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
                    prop="isMenu"
                    label="是否导航"
                    width="150">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.isMenu"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-value="1"
                            inactive-value="0">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
                    prop="sort"
                    label="排序"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="templateId"
                    label="模板"
                    width="150">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.templateId" disabled >
                        <el-option
                                v-for="item in options"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column
                    prop=""
                    label="设置"
                    width="200">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini"
                               v-if="parentIds.length<2"
                               @click="getNextMenu(scope.row.id)">查询下级</el-button>
                </template>
            </el-table-column>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini"
                               @click="handleEdit(scope.row.id)">编辑</el-button>
                    <el-button size="mini" type="danger"
                               @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <!--弹出窗口-->
    <el-dialog title="编辑" :visible.sync="formVisible">
        <el-form label-width="100px">
            <el-form-item label="分类名称" >
                <el-input placeholder="分类名称" v-model="pojo.name"></el-input>
            </el-form-item>
            <el-form-item label="是否显示" >
                <el-switch v-model="pojo.isShow"
                           active-color="#13ce66"
                           inactive-color="#ff4949"
                           active-value="1"
                           inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="是否导航" >
                <el-switch v-model="pojo.isMenu"
                           active-color="#13ce66"
                           inactive-color="#ff4949"
                           active-value="1"
                           inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="模板选择" prop="pojo.templateId">
                <el-select v-model="pojo.templateId" placeholder="请选择" >
                    <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-button @click="formVisible = false">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
        </el-form>
    </el-dialog>

</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            tableData:[], //品牌列表
            searchMap:{}, //搜索条件
            formVisible:false, //弹出框是否显示
            pojo:{}, //品牌的实体
            parentId:0,
            parentIds:[],
            options:[],
            isShow:0,
            isMenu:0
        },
        created(){//页面渲染前
            this.fetchData()
            this.findOptions()
        },
        methods:{
            /*getBrandList(){
                axios.get("/TbBrand/findAll").then(res=>{
                    this.tableData=res.data
                })
            }*/
            //查询
            fetchData(){
                axios.get(`/category/findList?parentId=${this.parentId}`).then(res=>{
                    //总的list集合
                    console.log(res)
                    this.tableData=res.data
                })
            },
            findOptions(){
                axios.get(`/template/findType`).then(res=>{
                    //总的list集合
                    console.log(res)
                    this.options=res.data
                    console.log(this.options)
                })
            },
            getNextMenu(id){
                this.parentIds.push(this.parentId)
                this.parentId=id

                alert(this.parentId)
                this.fetchData()

            },
            getUpMenu(){
                alert(this.parentIds.length-1)
                this.parentId=this.parentIds[this.parentIds.length-1]
                this.parentIds.splice(this.parentIds.length-1,1)
                this.fetchData()



            },
            //新增和修改
            save(){
                //判断新增和修改
                var url;
                if(this.pojo.id==null){
                    url=`/category/add`
                }else {
                    url="/category/update"
                }
                axios.post(url,this.pojo).then(res=>{
                    //关闭窗口
                    this.formVisible=false
                    //刷新列表
                    this.fetchData()
                })
            },
            //回显数据
            handleEdit(id){
                //显示窗口
                this.formVisible=true
                axios.get(`/category/findById?id=${id}`).then(res=>{
                    this.pojo=res.data
                })
            },
            //删除

            handleDelete(id){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    //调用删除方法
                    axios.get(`/category/delete?id=${id}`).then(res=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        //刷新页面
                        this.fetchData()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },

    })
</script>
</html>